<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
        <TableHeader
            :buttons="['refresh', 'delete', 'comSearch', 'quickSearch']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('shop.order.refund.quick Search Fields') })"
        >
            <!-- 自定义公共渲染 -->
            <template #refundStatusSearch>
                <StatusWithBadge v-model="baTable.comSearch.form.status" field="status" :data="statusInfo" />
            </template>
            <template #refundAuditStatusSearch>
                <StatusWithBadge v-model="baTable.comSearch.form.audit_status" field="audit_status" :data="auditStatusInfo" />
            </template>
        </TableHeader>

        <!-- 表格 -->
        <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
        <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
        <Table ref="tableRef" show-overflow-tooltip>
            <!-- 自定义渲染 -->
            <template #refundProcess>
                <el-table-column :label="'处理进度'" align="center" width="200">
                    <template #default="{ row }">
                        <view>
                            <text>{{ $t('shop.order.refund.audit_status') }}： </text>
                            <el-tag :type="auditStatusType(row.audit_status)">
                                {{ t('shop.order.refund.audit_status ' + row.audit_status) }}
                            </el-tag>
                        </view>
                        <!-- 审核成功 -->
                        <view v-if="row.audit_status == auditStatus.agree" class="process-audit">
                            <view class="process-item">
                                <text>{{ $t('shop.order.refund.user_ship_status') }}：</text>
                                <el-tag :type="userShipStatusTagType(row.user_ship_status)">
                                    {{ t('shop.order.refund.user_ship_status ' + row.user_ship_status) }}
                                </el-tag>
                            </view>
                            <view class="process-item">
                                <text>{{ $t('shop.order.refund.receive_status') }}：</text>
                                <el-tag :type="receiveStatusTagType(row.receive_status)">
                                    {{ t('shop.order.refund.receive_status ' + row.receive_status) }}
                                </el-tag>
                            </view>
                        </view>
                    </template>
                </el-table-column>
            </template>
            <template #handleTime>
                <el-table-column :label="$t('shop.order.refund.handle_time')" width="260" header-align="center">
                    <template #default="{ row }">
                        <div class="process-item">{{ $t('shop.order.refund.user_apply_time') }}：{{ row.create_time }}</div>
                        <div v-if="row.audit_status === auditStatus.agree" class="process-audit">
                            <div class="process-item">{{ $t('shop.order.refund.user_ship_time') }}：{{ row.user_ship_time || '--' }}</div>
                            <div class="process-item">{{ $t('shop.order.refund.receive_time') }}：{{ row.receive_time || '--' }}</div>
                        </div>
                    </template>
                </el-table-column>
            </template>
        </Table>

        <!-- 表单 -->
        <PopupForm />

        <!-- 详情 -->
        <DetailDialog />

        <!-- 审核弹窗 -->
        <audit-dialog v-if="baTable.table.extend!.showAuditDialog" />

        <!-- 确认收货弹窗 -->
        <receive-dialog v-if="baTable.table.extend!.showReceiveDialog" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, ref } from 'vue'
import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import DetailDialog from './detailDialog.vue'
import { auditStatus, receiveStatusTagType, userShipStatusTagType } from './index'
import auditDialog from './auditDialog.vue'
import receiveDialog from './receiveDialog.vue'
import StatusWithBadge from '/@/components/shop/table/statusWithBadge.vue'

defineOptions({
    name: 'order/refund',
})

const { t } = useI18n()
const tableRef = ref()

let optButtons: OptButton[] = []

//审核按钮
optButtons.push({
    render: 'tipButton',
    // name 是任意的
    name: 'verify',
    // title 是语言翻译 key
    title: 'shop.order.refund.refund_detail',
    text: '',
    type: 'warning',
    icon: 'fa fa-search-plus icon',
    click(row) {
        baTable.table.extend!.showDetailDialog = true
        baTable.table.extend!.orderData = row
    },
})

optButtons = optButtons.concat(defaultOptButtons(['delete']))

/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/shop.order.Refund/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            {
                label: t('shop.order.refund.id'),
                prop: 'id',
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'),
                operator: false,
                sortable: false,
                width: 50,
            },
            {
                label: t('shop.order.refund.order_no'),
                prop: 'orderRelation.order_no',
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'),
                operator: false,
                sortable: false,
                minWidth: 220,
            },
            {
                label: t('shop.order.refund.user_name'),
                prop: 'user.nickname',
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'),
                operator: false,
                sortable: false,
                minWidth: 160,
                showOverflowTooltip: true,
            },
            {
                label: t('shop.order.refund.refund_type'),
                prop: 'refund_type',
                align: 'center',
                render: 'tag',
                operator: false,
                replaceValue: {
                    '1': t('shop.order.refund.refund_type 1'),
                    '2': t('shop.order.refund.refund_type 2'),
                },
                width: 150,
                custom: {
                    '1': 'danger',
                },
            },
            {
                label: t('shop.order.refund.status'),
                prop: 'status',
                align: 'center',
                render: 'tag',
                operator: 'eq',
                sortable: false,
                replaceValue: {
                    '1': t('shop.order.refund.status 1'),
                    '2': t('shop.order.refund.status 2'),
                    '3': t('shop.order.refund.status 3'),
                },
                width: 150,
                comSearchRender: 'slot',
                comSearchSlotName: 'refundStatusSearch',
                comSearchColAttr: { xs: 24, sm: 24 },
                custom: {
                    1: 'warning',
                    2: 'success',
                    3: 'danger',
                },
            },
            {
                label: t('shop.order.refund.audit_status'),
                prop: 'audit_status',
                align: 'center',
                render: 'tag',
                operator: 'eq',
                sortable: false,
                replaceValue: {
                    '1': t('shop.order.refund.audit_status 1'),
                    '2': t('shop.order.refund.audit_status 2'),
                    '3': t('shop.order.refund.audit_status 3'),
                },
                width: 100,
                comSearchRender: 'slot',
                comSearchSlotName: 'refundAuditStatusSearch',
                comSearchColAttr: { xs: 24, sm: 24 },
                custom: {
                    1: 'warning',
                    2: 'success',
                    3: 'danger',
                },
                show: false,
            },
            {
                label: t('shop.order.refund.order_no'),
                prop: 'orderRelation.order_no',
                operator: 'eq',
                show: false,
            },
            {
                label: t('shop.order.refund.user_name'),
                prop: 'user.nickname',
                operatorPlaceholder: t('Fuzzy query'),
                operator: 'LIKE',
                show: false,
            },
            {
                label: t('shop.order.refund.refund_type'),
                prop: 'refund_type',
                render: 'tag',
                operator: 'eq',
                show: false,
                replaceValue: {
                    '1': t('shop.order.refund.refund_type 1'),
                    '2': t('shop.order.refund.refund_type 2'),
                },
            },
            {
                label: t('shop.order.refund.user_ship_status'),
                prop: 'user_ship_status',
                align: 'center',
                render: 'tag',
                operator: false,
                replaceValue: {
                    '0': t('shop.order.refund.user_ship_status 0'),
                    '1': t('shop.order.refund.user_ship_status 1'),
                },
                custom: {
                    0: 'info',
                    1: 'success',
                },
                show: false,
            },
            {
                label: t('shop.order.refund.receive_status'),
                prop: 'receive_status',
                align: 'center',
                render: 'tag',
                operator: false,
                replaceValue: {
                    '0': t('shop.order.refund.receive_status 0'),
                    '1': t('shop.order.refund.receive_status 1'),
                },
                custom: {
                    0: 'info',
                    1: 'success',
                },
                comSearchColAttr: { xs: 24, sm: 24 },
                show: false,
            },
            {
                render: 'slot',
                slotName: 'refundProcess',
                operator: false,
            },
            {
                label: t('shop.order.refund.create_time'),
                prop: 'create_time',
                align: 'center',
                render: 'datetime',
                operator: 'RANGE',
                sortable: 'custom',
                timeFormat: 'yyyy-mm-dd hh:MM:ss',
                show: false,
            },
            {
                label: t('shop.order.refund.handle_time'),
                render: 'slot',
                slotName: 'handleTime',
                operator: false,
            },
            { label: t('Operate'), align: 'center', render: 'buttons', buttons: optButtons, operator: false, fixed: 'right', width: 120 },
        ],
        dblClickNotEditColumn: ['all'],
    },
    {
        defaultItems: {},
    },
    {},
    {
        getIndex({ res }) {
            statusInfo.value = res.data.statusInfo.status
            auditStatusInfo.value = res.data.statusInfo.audit_status
        },
    }
)

provide('baTable', baTable)

const statusInfo = ref([
    { name: t('shop.order.refund.status 1'), value: '1', count: 0 },
    { name: t('shop.order.refund.status 2'), value: '2', count: 0 },
    { name: t('shop.order.refund.status 3'), value: '3', count: 0 },
])
const auditStatusInfo = ref([
    { name: t('shop.order.refund.audit_status 1'), value: '1', count: 0 },
    { name: t('shop.order.refund.audit_status 2'), value: '2', count: 0 },
    { name: t('shop.order.refund.audit_status 3'), value: '3', count: 0 },
])

const auditStatusType = (status: number) => {
    switch (status) {
        case 1:
            return 'warning'
        case 2:
            return 'success'
        case 3:
            return 'danger'
        default:
            return 'info'
    }
}
onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})

baTable.table.showComSearch = true
</script>

<style scoped lang="scss">
:deep(.el-badge__content.is-fixed) {
    top: -10px;
}

.process-audit {
    display: flex;
    flex-direction: column;
}

.process-item {
    padding-top: 3px;
}

@media screen and (min-width: 768px) {
    :deep(.table-com-search) {
        .status {
            .com-search-col-label {
                width: 8.3%;
            }
        }
        .audit_status {
            .com-search-col-label {
                width: 8.3%;
            }
        }
    }
}
</style>
